import React from 'react'
import Utils from '../../utils/utils'
import {Input,Select,Form,Button, Checkbox,DatePicker} from 'antd'
const FormItem=Form.Item;
class FilterForm extends React.Component{
    handleFilterSubmit=()=>{
        //获取表单所有的值
        let fieldsValue=this.props.form.getFieldsValue();
        //这个方法是自己定义的
        this.props.filterSubmit(fieldsValue);
    }
//    重置
 reset=()=>{
     this.props.form.resetFields()
 }

    initFormList=()=>{
        const {getFieldDecorator} = this.props.form;
         // 双向数据绑定是你选择的值会自动绑定到city_id里
        const formList=this.props.formList;
        const formItemList=[];
        if(formList&&formList.length>0){
             formList.forEach((item,i)=>{
                 let label=item.label;
                 let field=item.field;
                 let initialValue=item.initialValue;
                 let placeholder=item.placeholder;
                 let width=item.width;
                 if(item.type==="时间查询"){
                    const  begin_time=<FormItem label='订单时间' key={field+"1"}>
                       {
                           getFieldDecorator('begin_time',{
                                // 双向数据绑定是你选择的值会自动绑定到city_id里
                               initialValue:initialValue
                           })(
                               <DatePicker showTime={true} placeholder={placeholder} format='YYYY-MM-DD HH:mm:ss'></DatePicker>
                               )
                       }
                       </FormItem>
                    formItemList.push(begin_time);
                       const end_time=<FormItem label="~" colon={false} key={field+"2"}>
                           {
                               getFieldDecorator('end_time',{
                                   initialValue:initialValue
                               })(
                                   <DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"></DatePicker>
                               )
                           }
                           </FormItem>
                       formItemList.push(end_time);
                 }else if(item.type==='INPUT'){
                     const INPUT=<FormItem label={label} key={[field]}>
                        {
                             getFieldDecorator([field],{
                                 initialValue:initialValue
                             })(
                                // 双向数据绑定是你选择的值会自动绑定到city_id里
                                  <Input tyep="text" style={{width:width}} placeholder={placeholder}/>
                               )
                        }
                     </FormItem>
                     formItemList.push(INPUT)
                 }else if(item.type==='SELECT'){
                    const SELECT = <FormItem label={label} key={field}>
                        {
                            getFieldDecorator([field],{
                              initialValue:initialValue //true|false 必须有
                            })(
                              <Select 
                                key={field}
                                style={{width:width}}
                                placeholder={placeholder}
                              >
                               {Utils.getOptionList(item.list)}
                              </Select>
                            )
                        }
                    </FormItem>
                     formItemList.push(SELECT)
                 }else if(item.type==='CHECKBOX'){
                    const CHECKBOX = <FormItem label={label} key={field} >
                        {
                            getFieldDecorator([field],{
                              valuePropsName:'checked',
                              initialValue:initialValue
                            })(
                              <Checkbox 
                              style={{width:width}}
                              placeholder={placeholder}
                              >
                               {Utils.getOptionList(item.list)}
                              </Checkbox>
                            )
                        }
                    </FormItem>
                     formItemList.push(CHECKBOX)
                 }else if(item.type==='Date'){
                    const DATEPICKER = <FormItem label={label} key={field}>
                       {
                               getFieldDecorator([field],{
                                   initialValue:initialValue
                               })(
                                   <DatePicker showTime={true} placeholder={placeholder} format="YYYY-MM-DD HH:mm:ss"></DatePicker>
                               )
                           }
                    </FormItem>
                     formItemList.push(DATEPICKER)
                 } else if (item.type === '城市') {
                     const CITY = <FormItem label="城市" key={field}>
                         {
                             getFieldDecorator(field, {
                                 initialValue: '0'
                             })(
                                 <Select
                                     rowKey={field}
                                     style={{ width: 80 }}
                                     placeholder={placeholder}
                                 >
                                     {Utils.getOptionList([{ id: '0', name: '全部' }, { id: '1', name: '北京市', id: '2', name: '天津市' }, { id: '3', name: '上海市' }])}
                                 </Select>
                             )
                         }
                     </FormItem>
                     formItemList.push(CITY)
                 }
             })
        }
        return formItemList
    }
    render(){
        return(
           <Form layout="inline">
               {this.initFormList()}
               <FormItem >
                   <Button type="primary" style={{margin:'0 20px'}} onClick={this.handleFilterSubmit}>查询</Button>
                   <Button onClick={this.reset}>重置</Button>
               </FormItem>
           </Form>
        )
    }
}
export default FilterForm = Form.create()(FilterForm)